import { ComponentWithStore } from 'mobx-miniprogram-bindings'
import { userStore } from '../../stores/userstore'
import { reqCartList, reqUpdateChecked, reqCheckAllStatus, reqAddCart, reqDeleteCart } from '../../api/cart'
import { modal, toast } from '../../utils/expendApi'
const computedBehavior = require('miniprogram-computed').behavior
import { debounce } from 'miniprogram-licia'
// 导入让删除滑块 自动弹回的behavior
import { swiperCellBehavior } from '../../behaviors/swiperCell'
ComponentWithStore({
  behaviors: [computedBehavior, swiperCellBehavior],
  // 让页面和store对象建立关联
  storeBindings: {
    store: userStore,
    fields: ['token']
  },
  data: {
    cartList: [1, 2, 3, 4],
    emptyDes: '还没有添加商品，快去添加吧～'
  },
  // 计算属性
  computed: {
    // 判断是否是全选,控制全选按钮的选中效果
    // 计算属性会被挂载到 data对象中
    selectAllStatus (data) {
      return data.cartList.length!==0 && data.cartList.every(item => item.isChecked === 1)
    },
    totalPrice(data) {
      // 用来对订单总金额进行累加
      let totalPrice = 0
      data.cartList.forEach(item => {
        if(item.isChecked === 1) {
          totalPrice += item.price * item.count
        }
      })
      return totalPrice
    }
  },
  methods: {
    // 获取列表数据
    async showTipGetList () {
      const { token } = this.data
      if(!token) {
        this.setData({
          emptyDes: '您尚未登录,登录后获取更多权益',
          cartList: []
        })
        return
      }
      const { code, data:cartList } = await reqCartList()
      if(code === 200) {
        this.setData({
          cartList,
          emptyDes: cartList.length==0&&'还没有添加商品,快去添加吧~'
        })
      }
    },
    // 更新商品选中
    async updateChecked (e) {
      const { detail } = e
      const { id, index } = e.target.dataset
      // 将最新购买状态转换成0 1
      const isChecked = detail?1:0
      const res = await reqUpdateChecked(id, isChecked)
      if(res.code === 200) {
        // this.showTipGetList()
        this.setData({
          [`cartList[${index}].isChecked`]: isChecked
        })
      }
    },
    // 全选按钮改变
    async selectAllStatus (e) {
      // e.detail就是改变后的状态 
      const { detail } = e
      const isChecked = detail?1:0
       // 调用接口实现全选和全不选功能
       const res = await reqCheckAllStatus(isChecked)
       if(res.code === 200) {
         // this.showTipGetList()
        const newCartList = JSON.parse(JSON.stringify(this.data.cartList))
        newCartList.forEach(item => item.isChecked = isChecked)
        this.setData({
          cartList: newCartList
        })
       }
    },
    // 更新购买数量
    changeBuyNum: debounce(async function(e){
      // 获取最新的购买数量
      const newBuyNum = e.detail >200?200:e.detail
      const { id, index, oldbuynum } = e.target.dataset
      // 对用户输入的进行正则判断
      const reg = /^([1-9]|[1-9]\d|1\d{2}|200)$/
      const regRes = reg.test(newBuyNum)
      if(!regRes) {
        // 没通过 还原之前的购买数量
        this.setData({
          [`cartList[${index}].count`]: oldbuynum
        })
        return toast({title: '输入数据不合法'})
      }
      const disCount = newBuyNum - oldbuynum
      // 避免商品数量原来是1  用户又输入了1的情况
      if(disCount === 0) return
      const res = await reqAddCart({goodsId:id, count:disCount})
      if(res.code === 200) {
        this.setData({
          [`cartList[${index}].count`]: newBuyNum,
          // 如果数量发生变化, 让当前商品变成选中状态
          [`cartList[${index}].isChecked`]: 1,
        })
      }
    },500),
    // 删除购物车商品
    async delCartGoods (e) {
      const { id } = e.currentTarget.dataset
      const modres = await modal({
        content: '是否要删除该商品'
      })
      if(modres) {
        await reqDeleteCart(id)
        this.showTipGetList()
      }
    },
     // 去订单结算
     toOrder() {
      // 没勾选商品 不给跳转
      if(this.data.totalPrice === 0) {
        return toast({title: '请选择需要购买的商品'})
      }
      wx.navigateTo({
        url: '/modules/orderPayModule/pages/order/detail/detail',
      })
    },
    onShow () {
      this.showTipGetList()
    },
    onHide () {
      // 切换其他页面 再返回 发现swipercell 没弹回
      this.onSwiperCellCommonClick()
    }
  }
})